<template>
	<div>
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="closeDialog"
			@submit="submit"
			:dialogFooterBtn="true"
			:showSubmit="true"
		>
			<div>
				<div class="base-user-info">
					<div class="title">基本信息</div>
					<el-divider />
					<el-form label-width="100">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="用户头像" prop="avatar">
									<div class="image">
										<el-image v-if="state.ruleForm.avatar != ''" :src="STATIC_URL + state.ruleForm.avatar" fit="cover" class="image" />
									</div>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="会员昵称">
									<el-input v-model="state.ruleForm.nickname" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="会员名">
									<el-input v-model="state.ruleForm.username" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="手机号">
									<el-input v-model="state.ruleForm.mobile" />
								</el-form-item>
							</el-col>

							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="会员积分">
									<el-input v-model="state.ruleForm.score" />
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="消费总额">
									<el-input v-model="state.ruleForm.amount" />
								</el-form-item>
							</el-col>

							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="最后登录时间">
									<el-input v-model="state.ruleForm.lastLoginTime" />
								</el-form-item>
							</el-col>

							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="注册时间">
									<el-input v-model="state.ruleForm.registration" />
								</el-form-item>
							</el-col>

							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="会员性别">
									<el-radio-group v-model="state.ruleForm.gender">
										<el-radio :value="0" label="未知"></el-radio>
										<el-radio :value="1" label="男"></el-radio>
										<el-radio :value="2" label="女"></el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="会员状态">
                  <el-radio-group v-model="state.ruleForm.status">
										<el-radio :value="0" label="正常"></el-radio>
										<el-radio :value="1" label="禁用"></el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="会员认证">
                  <el-radio-group v-model="state.ruleForm.approve">
										<el-radio :value="0" label="未审核"></el-radio>
										<el-radio :value="1" label="审核通过"></el-radio>
										<el-radio :value="2" label="审核未通过"></el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="third-user-info">
					<div class="title">三方账号</div>
					<el-divider />
				</div>
			</div>
		</CustomDialog>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ClientUser } from '/@/api/shop/user';
import messageUtils from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';

const state = reactive({
	ruleForm: {
		nickname: '',
		lastLoginTime: '',
		username: '',
		mobile: '',
		score: '',
		amount: '',
		registration: '',
		status: '',
		gender: '',
		approve: '',
		avatar: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '会员信息',
		submitTxt: '',
	},
});

const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

const openDialog = async (id: string) => {
	state.dialog.isShowDialog = true;
	try {
		const { data } = await ClientUser().view(id);
		state.ruleForm = data;
	} catch (error) {
		messageUtils().error('操作失败,稍后重试');
		state.dialog.isShowDialog = false;
	}
};

const submit = () => {
	console.log('子组建。。。submit');
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.title {
	height: 16px;
	line-height: 16px;
	font-size: 16px;
	color: var(--sd-title);
	overflow: hidden;
}
</style>
